<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.css" />
	</head>
	<style type="text/css">
		body {
			margin: 0px;
			padding: 0px;
		}
		.swiper-container {
			margin: 20px auto;
			width: 600px;
			height: 300px;
			border: 1px black solid;
		}
		.swiper-slide {
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">Slide 1</div>
				<div class="swiper-slide">Slide 2</div>
				<div class="swiper-slide">Slide 3</div>
				<div class="swiper-slide">Slide 4</div>
				<div class="swiper-slide">Slide 5</div>
				<div class="swiper-slide">Slide 6</div>
				<div class="swiper-slide">Slide 7</div>
				<div class="swiper-slide">Slide 8</div>
				<div class="swiper-slide">Slide 9</div>
				<div class="swiper-slide">Slide 10</div>
			</div>
			<!-- 增加箭头(前后左右) -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
		</div>

		<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>

		<script>
			var swiper = new Swiper(".swiper-container",{
				// navigation 航海导航
				navigation:{
					// 下/上 一个元素标签用对应class进行操作
					nextEl:'.swiper-button-next',
					prevEl:'.swiper-button-prev',
				},
			});
		</script>
	</body>

</html>